<template>
     <el-dialog title="管理员编辑" :data="visible" :visible.sync="visible" :show-close="false" width="720px" :modal="true"
                :close-on-click-modal="false"  :close-on-press-escape="false"  top="50px" style="margin-bottom:20px">
       <!-- 这里的:show-close="false"是设置不显示关闭按钮，因为弹窗显示状态值（:visible.sync）是从父组件传递的参数，如果使用自带的关闭按钮，会报出一个错误 -->
        <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal"><i class="el-dialog__close el-icon el-icon-close"></i></button>
        <el-form :model="propsData"  :rules="rules" ref="propsData" label-width="100px">
          <el-form-item label="用户昵称" prop="username">
            <el-input v-model="propsData.username" type="text" placeholder="请输入用户昵称" style="width: 90%;"></el-input>
          </el-form-item>
          <el-form-item label="真实名称" prop="realname">
            <el-input v-model="propsData.realname" type="text" placeholder="请输入用户真实名称(接单显示)" style="width: 90%;"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="mobile" v-if="login_id!=propsData.id" >
            <el-input v-model="propsData.mobile" type="text" placeholder="请输入联系电话" style="width: 90%;"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="password" type="password" placeholder="允许数字、字母、下划线的6~18位组合,默认123456"  style="width: 90%;"></el-input>
          </el-form-item>
           <el-form-item label="确认密码">
            <el-input v-model="password_sure" type="password" placeholder="请再次输入设置的密码"  style="width: 90%;"></el-input>
          </el-form-item>
          <div v-if="login_id!=propsData.id">
            <el-form-item>
              <el-radio-group v-model="propsData.isaccount" text-color='#13CE66' size="mini">
                <el-radio label="0" border>不参与结算</el-radio>
                <el-radio label="1" border>参与结算</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="propsData.status" text-color='#13CE66' @change="changeAdminState" size="mini">
                <el-radio label="0" border>无效用户</el-radio>
                <el-radio label="1" border>有效用户</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label-width="100px" label="登陆后台?" size="mini">
              <el-switch  active-color="#13ce66" inactive-color="#ff4949"  
                        active-value="1"  inactive-value="0"
                        active-text="可登录" inactive-text="禁止登录后台" 
                        v-model="propsData.islogin">
              </el-switch>
            </el-form-item>

            <el-form-item label="后台角色" prop="role_id">
              <el-select v-model="propsData.role_id" placeholder="请选择用户角色" style="width: 90%;" @change="changeRole">
                <el-option v-for="option in propsData.roleOptions" :key="option.id"  :label="option.name"  :value="option.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="配送角色" prop="role_type" v-show="roleTypeStatus">
              <el-select v-model="propsData.role_type" placeholder="请选择配送角色" style="width: 90%;">
                <el-option v-for="option in roleTypeOptions" :key="option.id"  :label="option.name"  :value="option.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分配营业点" prop="unit_id">
              <el-select v-model="selectOutlet" value-key="id" multiple filterable  reserve-keyword  placeholder="搜索营业店" :loading="unitsloading" style="width: 90%;">
                <el-option v-for="item in outletOptions"  :key="item.id" :label="item.hotel_name"  :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" :loading="loading"  @click="submitForm">保 存</el-button>
        </div>
      </el-dialog>
</template>


<script>
import * as api from '@/api/main-api' // API
import { mapGetters } from 'vuex'

export default {
  name: 'editAdminUser',
  computed: {
    // 从 vuex 去除数据
    ...mapGetters(['login_id'])
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    propsData: Object
  },
  // 监事传过来的值
  watch: {
    propsData: {
      handler: function(val, oldVal) { /* 编辑时用户名不为空 则不触发改变 */
        this.selectOutlet = val.outlet_info
        if (val.role_id === '7') {
          this.roleTypeStatus = true
        }
      },
      deep: true
    }
  },

  data() {
    return {
      password: '',
      password_sure: '',
      // roleOptions: [],
      outletOptions: [],
      selectOutlet: [],
      roleTypeStatus: false,
      loading: false,
      unitsloading: false,

      rules: {
        mobile: [
          { required: true, message: '手机号码不能为空', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号格式错误' }
        ]
      },
      roleTypeOptions: [
        {
          id: '1',
          name: '配送 1 级'
        },
        {
          id: '2',
          name: '配送 2 级'
        }
      ]
    }
  },

  methods: {
    // 关闭弹窗，触发父组件修改visible值
    cancelModal() {
      this.roleTypeStatus = false
      this.$emit('update:visible', false)
    },

    // 表单提交
    submitForm() {
      // 数据赋值
      var postData = {
        id: this.propsData.id,
        role_id: this.propsData.role_id,
        username: this.propsData.username,
        realname: this.propsData.realname,
        mobile: this.propsData.mobile,
        password: this.password,
        role_type: this.propsData.role_type,
        isaccount: this.propsData.isaccount,
        islogin: this.propsData.islogin,
        status: this.propsData.status,
        is_multiport: this.propsData.is_multiport
      }
      var outlet = this.selectOutlet
      if (outlet !== 'undefined' && outlet.length > 0) {
        // 这里整理数据
        var myids = []
        for (var i in outlet) { // 遍历json数组时，这么写p为索引，0,1
          myids.push(outlet[i].id)
        }
        postData.unit_ids = myids.join(',')
      } else {
        postData.unit_ids = '0'
      }
      // 数据开始提交
      this.$refs.propsData.validate(valid => {
        if (valid) {
          this.loading = true
          var surePwd = this.surePwd(this.password, this.password_sure)
          if (surePwd) {
            this.postDataUrl(postData)
          }
        } else {
          console.log('error submit!!')
          this.loading = false
          return false
        }
      })
    },

    // 管理员提交数据
    postDataUrl(data) {
      api.editAdminApi(data).then(response => {
        if (response.data.code === 0) {
          this.$root.message('操作成功', 'success')
          setTimeout(() => {
            this.cancelModal() // 关闭弹框
            this.$emit('refresh', true)
          }, 20)
        }
      })
      this.loading = false
    },

    // 获取角色列表
    // roleList() {
    //   api.selectRoleListApi().then(response => {
    //     if (response.data.code === 0) {
    //       this.roleOptions = response.data.data
    //     }
    //   })
    // },

    // 获取选择营业点列表
    outleList() {
      var postData = {
        has_fund: 2 // 1:不显示,2:显示
      }
      api.selectOutleApi(postData).then(response => {
        if (response.data.code === 0) {
          this.outletOptions = response.data.data
        }
      })
    },

    // 密码验证
    surePwd(pwd, surepwd) {
      if (pwd && !surepwd) {
        this.$root.message('请再次输入密码', 'error')
        this.loading = false
        return false
      } else if (pwd && pwd !== surepwd) {
        this.$root.message('两次输入密码不一致!', 'error')
        this.loading = false
        return false
      } else {
        return true
      }
    },

    // 配送员角色1级2级选择
    changeRole(val) {
      this.roleTypeStatus = (val === '7')
    },

    // 用户状态
    changeAdminState(v) {
      if (v === '0') {
        this.propsData.islogin = '0'
      }
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-form-item {
    margin-bottom: 12px;
  }
  .el-radio.is-bordered.is-checked {
    border-color:  #13CE66;
  }
  .el-switch {
    line-height: 1px;
    height: 16px;
  }
</style>